<template lang="pug">
  .tab-1
    Table.hasTitle-table.beautiful-table(:columns="setThead" :data="noExamineContractList" @on-selection-change="tableSelectChange")
      .pr-24.pl-24(slot="header")
        .pull-right.table-title-btns
          Button.mr-15(type="info" @click="shenpiBtn") 批量审批
          Button.mr-15(type="info" @click="tuihuiBtn") 批量退回
      template(slot-scope="{ row, index }" slot="action_2")
        Button.mr-10(type="info" size="small" @click="downFile(row.id)") 合同下载
        Button.mr-10(type="info" size="small" @click="progressBtn(row.id, row.contractNo, row.contractType)") 进度查看
    Modal.lzw-modal-style-1.has-bg(v-model="tuihuiModal" title="退回原因")
      .remark
        .label
          span.red *
          | 备注
        Input(v-model="remark" type="text")
      div(slot="footer")
        Button(@click="tuihuiModal = false") 取消
        Button(type="info" @click="confirmTuihui") 确定
</template>

<script>
import commerceContractApi from '@/api/commerceContract.api.js'
import theadMixin from '../../theadMixin.js'
export default {
  props: {
    noExamineContractList: Array
  },
  mixins: [theadMixin],
  data () {
    return {
      thead: ['selection', 'contractNo', 'applyUserName', 'applyDepartment', 'applyTime', 'contractType', 'sealType', 'contractTemplate', 'productType', 'process', 'action_2'],
      successType: 1, // 审批状态=1 审批，0 退回
      tuihuiModal: false, // 退回原因弹窗
      remark: '', // 退回原因
      contracts: [] // 审批的合同合集
    }
  },
  computed: {
    setThead () {
      return this.getTableColumns(this.thead)
    }
  },
  methods: {
    // 获取进度
    progressBtn (id,no,type) {
      this.$emit('get-progress', {
        id,
        no,
        type
      })
    },
    shenpiBtn () {
      if (this.contracts.length > 0) {
        this.successType = 1
        this.postContractWorkFlow()
      } else {
        this.$Message.warning('请选择需要审批的合同')
      }
    },
    tuihuiBtn () {
      if (this.contracts.length > 0) {
        this.successType = 0
        this.tuihuiModal = true
      } else {
        this.$Message.warning('请选择需要退回的合同')
      }
    },
    confirmTuihui () {
      if (this.remark) {
        this.contracts.forEach(item => {
          item.Remark = this.remark
        })
        this.postContractWorkFlow()
      } else {
        this.$Message.warning('请输入退回原因')
      }
      // this.postContractWorkFlow
    },
    // 批量审批或退回===1 审批，0 退回
    postContractWorkFlow () {
      commerceContractApi.PostContractWorkFlow({
        Success: this.successType,
        Contracts: this.contracts
      }).then(res => {
        console.log(res)
        if (res.data.success) {
          this.contracts = []
          this.tuihuiModal = false
          this.$emit('get-list')
        } else {
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
        }
      })
    },
    tableSelectChange (val) {
      if (val.length > 0) {
        this.contracts = val.map(item => {
          return {
            ID: item.id,
            ContractNo: item.contractNo,
            ContractType: item.contractType,
            Remark: ''
          }
        })
      } else {
        this.contracts = []
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .remark{
    display: flex;
    align-items: center;
    .label{
      width: 80px;
      span.red{
        color: #ed4014;
        margin-right: 5px;
      }
    }
  }
</style>
